<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/agents/index' }">智能体</el-breadcrumb-item>
      <el-breadcrumb-item>声纹识别</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="card dialog-form">
      <h1>
        <span>afadwa</span>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
          >添加说话人</el-button
        >
      </h1>
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="名称"> </el-table-column>
          <el-table-column prop="name" label="描述"> </el-table-column>
          <el-table-column prop="address" label="创建时间"> </el-table-column>
          <el-table-column prop="address" label="操作"> </el-table-column>
        </el-table>
      </template>
    </el-card>

    <el-dialog
      title="添加说话人"
      :visible.sync="open"
      width="600px"
      append-to-body
      class="dialog-form"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="声纹向量" prop="userName">
          <el-select v-model="form.key" placeholder="请选择声纹向量">
            <el-option v-for="i in 3" :key="i" :label="i" :value="i" />
          </el-select>
        </el-form-item>
        <p class="tips">
          <i class="el-icon-warning"></i
          >请选择一段清晰的独白语音（2秒以上），不要包含背景噪音和其他人的声音
        </p>

        <el-form-item label="名称" prop="key">
          <el-input v-model="form.key" placeholder="请输入名称" />
        </el-form-item>

        <el-form-item label="描述" prop="key">
          <el-input
            v-model="form.key"
            type="textarea"
            maxlength="100"
            placeholder="请输入描述"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--  底部  -->
    <detault-footer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        key: [{ required: true, trigger: "blur", message: "开发板ID不能为空" }],
      },
      tableData: [],
      open: false,
    };
  },
  methods: {
    handleEdit() {
      const { item } = this;
      this.$emit("handleEdit", item);
    },
    async handleDelete() {
      const { item } = this;
      try {
        const flag = await this.$modal.confirm("是否确认删除该数据项？");
        if (!flag) return;
        this.$emit("getList");
        this.$modal.msgSuccess("操作成功");
      } catch (error) {
        console.error("操作失败", error);
      }
    },
    resetFormFun() {
      this.form = {};
      this.resetForm("form");
    },
    submitForm() {},
    handleAdd() {
      this.open = true;
    },
    cancel() {
      this.open = false;
      this.resetFormFun();
    },
  },
};
</script>

<style scoped lang="scss">
.dialog-form {
  max-width: 800px;
  margin: 0 auto;
  width: 90%;
  min-height: calc(100vh - 250px);
  h1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.card {
  margin: 22px auto;
}

.intell-txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .block-label label {
  display: block;
  float: none;
  text-align: left;
}
.dialog-form .el-select {
  width: 100%;
}
.title-item {
  margin-bottom: 0;
}
.tips {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  font-size: 14px;
  margin-top: -15px;
  gap: 5px;
  margin-bottom: 10px;
  .el-icon-warning {
    color: #1890ff;
  }
}
.dialog-footer {
  margin-top: 22px;
}
</style>
